import { Button, Table } from 'antd';
import axios from 'axios';
import React, { useEffect, useState } from 'react'
import type { ColumnsType } from 'antd/es/table';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
export default function App() {
  //定义一个接口，为了规范数组中的对象结构，而且也希望在使用对象的时候能够有提示
  interface BookOne {
    autor: string;
    id: number;
    img: string;
    infro: string;
    name: string;
  }
  //定义一个数组类型
  type BookLists = BookOne[];

  //初始化所有图书数据状态
  let [books, setBooks] = useState<BookLists>([]);
  //定义当前是第几页数据
  let [current, setCurrent] = useState(1);
  //定义每一页显示多少条数据
  let [pageSize, setPageSize] = useState(3);
  //定义一个总数的状态
  let [total, setTotal] = useState(10);
  //组件挂载完成的时候需要做ajax请求
  useEffect(() => {
    //定义异步函数
    async function getBooks() {
      let { data } = await axios.get<BookLists>('/api/books');
      // console.log(data);
      // console.log(data[0].name);
      //修改状态数据
      setBooks(data);
    }
    //调用
    getBooks();
  }, [])

  //数据列，一来为了展示列名，二来列需要和数据的字段进行绑定
  const columns: ColumnsType<any> = [
    {
      title: '编号',
      dataIndex: 'id',
      align: 'center',
      width: 70,
      //render在什么情况下使用？？
      //只要是dataIndex这个属性绑定完字段值显示的效果不是咱们程序员需要的，有可能需要加工一下的，则要配置render属性
      //参数分别为当前行的值，当前行数据，行索引
      render: (text: any, record: any, index: number) => {
        return index + 1;
      }
    },
    {
      title: '书名',
      dataIndex: 'name',
    },
    {
      title: '作者',
      dataIndex: 'autor',
    },
    {
      title: '缩略图',
      dataIndex: 'img',
      render: (text: any, record: any, index: number) => {
        // console.log('当前行的值：', text)
        // console.log('当前行数据:', record)
        return <img src={`/image/${text}`} width={100} />
      }
    },
    {
      title: '操作',
      render: (text: any, record: any, index: number) => {
        return <>
          <Button type="primary" icon={<EditOutlined />}>
            编辑
          </Button>
          <Button type="primary" icon={<DeleteOutlined />} className='ml'>
            删除
          </Button>
        </>
      }
    },
  ];
  return (
    <div>
      <Table
        //数据源 
        dataSource={books}
        //绑定key值
        rowKey='id'
        //列
        columns={columns}
        //是否展示列边框
        bordered
        //分页器配置
        pagination={{
          //当前页
          current,
          //每页显示的条数
          pageSize,
          //总数
          total,
          //显示下拉列表(可以自定义每页显示多少条数据)
          pageSizeOptions: [3, 5],
          //是否显示分页下拉列表
          showSizeChanger: true,
          //是否快速跳转至某页
          showQuickJumper: true,
          //是否显示总数
          showTotal: (total: number) => {
            return `总数${total}条`
          },
          //当只要是页码和下拉列表中的数据改变了，则需要调用onChange事件
          onChange: (page: number, pageSize: number) => {
            // console.log('点击最新的当前页数：', page);
            setCurrent(page);
            setPageSize(pageSize)
          }
        }} />
    </div>
  )
}
